<template>
    <div class="container">
        <van-nav-bar
		title="吊唁密码设置"
		left-arrow
		@click-left="onClickLeft"
		/>
      <van-cell-group class="group">
        <van-field
          v-model="password"
          label="密码"
          placeholder="请输入密码"
          required
        />
      </van-cell-group>
      <van-button size="large" @click="login">保存</van-button>
    </div>
</template>
<script>
export default {
  data () {
    return {
      show: false,
      username: '',
      password: '',
      phone: '',
      sms: '',
      changeName: '手机动态登录'
    }
  },
  created () {
    if (this.$route.query.password != undefined) {
      this.password = this.$route.query.password
    } else {
      this.password = window.localStorage.getItem('password')
    }
    // if (!window.localStorage.getItem('item').condolencespwd) {
      
    // }
  },
  methods: {
      onClickLeft () {
        this.$dialog.confirm({
                title: '返回',
                message: '返回将取消当前密码，是否继续'
            }).then(() => {
                window.localStorage.removeItem('password')
                // window.localStorage.removeItem('movicetype')
                this.$router.go(-1)
            }).catch(() => {
                // on cancel
            });
          // this.$router.push('/detail-page')
      },
      login () {
        window.localStorage.setItem('password', this.password)
        this.$toast('保存成功')
        this.$router.go(-1)
      }
  }
}
</script>

<style scoped lang="scss">
.container{
  width: 100%;
  height: 100%;
  h1{
    font-size: 1.875rem;
    color: #fff;
    font-family: 'Trebuchet MS', sans-serif;
    text-align: center;
    padding-top: 2.55rem;
  }
  .title {
    font-size: 14px;
    text-align: center;
    color: #fff;
    display: block;
    margin-top: 10px;
  }
  .change{
    color: #fff;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 0.9rem;
    display: block;
    margin-bottom: 8px;
    cursor: pointer;
  }
  .van-cell-group {
    // margin-top: 1.125rem;
    .van-field .van-cell__title{
      color: #4d4d4D;
    }
  }
  .van-row, .van-col--offset-12{
    color: red;
    font-size: 12px;
    margin-left: 50%;
    margin-top: .225rem;
  }
  .van-button--large  {
  }
  .log{
    font-size: 16px;
    color: #fff;
    width: 100%;
    text-align: center;
    display: inline-block;
    margin-top: 6px;
  }
  .imgs{
    display: flex;
    position: absolute;
    bottom: 30px;
    img {
      width: 30px;
      height: 30px;
      margin-left: 20px;
    }
  }
  .circle, .rect{
    background: #fff;
    position: absolute;
    left: 20px;
    bottom: 20%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    opacity: .7;
    animation: up 5s infinite;
    animation-fill-mode: forwards;
    -webkit-animation: up 5s infinite;
  }
  .rect{
    width: 15px;
    height: 15px;
    border-radius: 0px;
    left: 80%;
    animation: ups 3s infinite;
    animation-fill-mode: forwards;
    -webkit-animation: ups 3s infinite;
  }
  .trangle{
    width:0;
    height:0;
    border-width:0 10px 10px;
    border-style:solid;
    border-color:transparent transparent #fff;/*透明 透明  灰*/
    left: 50%;
    position: absolute;
    bottom: 35%;
    animation: upt 7s infinite;
    animation-fill-mode: forwards;
    -webkit-animation: upt 7s infinite;
  }

  @-webkit-keyframes up {
    0% {
      bottom: 20%;
    }
    100% {
      bottom: 100%;
      opacity: 0;
    }
  }
  @keyframes up {
    0% {
      bottom: 20%;
    }
    100% {
      bottom: 100%;
      opacity: 0;
    }
  }
  @-webkit-keyframes ups {
    0% {
      bottom: 50%;
    }
    100% {
      bottom: 100%;
      opacity: 0;
    }
  }
  @keyframes ups {
    0% {
      bottom: 50%;
    }
    100% {
      bottom: 100%;
      opacity: 0;
    }
  }
  @-webkit-keyframes upt {
    0% {
      bottom: 35%;
    }
    100% {
      bottom: 100%;
      opacity: 0;
    }
  }
  @keyframes upt {
    0% {
      bottom: 35%;
    }
    100% {
      bottom: 100%;
      opacity: 0;
    }
  }
}
</style>
